import {useDispatch} from "react-redux";
import './index.scss'


const Footer = (props) => {
    const dispatch = useDispatch()
    const handleCheckAll = (event) => {
        dispatch(props.updateAllTodoDone(event.target.checked))
    }
    const handleClearAllDone = () => {
        dispatch(props.clearAllDone())
    }
    const {todos} = props
    const total = todos.length
    const doneCount = todos.reduce((pre, current) => pre + current.done, 0)
    return (
        <div className='todo-footer'>
            <label>
                <input type='checkbox' onChange={handleCheckAll} checked={(doneCount > 0 && doneCount === total)}/>
            </label>
            <span>已完成{doneCount}</span> /全部{total}
            <button onClick={handleClearAllDone} className='btn btn-danger'>清楚已完成任务</button>
        </div>
    )
}

export default Footer;

